<template>
    <div class="process-monitoring-box">
        <commpVxeTable
         :config="dataTableConfig" 
         :columns="columnsVxe" 
         :formItem="formItem"
         ref="acceptanceRegistrationRef"
         @searchEvent="searchEvent"
         @resetEvent="resetEvent"
         @checkboxChange="checkboxChange"
         >
            <template v-slot:externalOperations="{data}"  >
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="exportClick()">导出</a-button>
                    </template>
                </vxe-form-item>
            </template>
            <template v-slot:fcyjssj_name="{row}"  >
                <a-range-picker v-model:value="inspectionTime"/>
            </template>
            <template v-slot:fqylxr_fqylxrdh="{row}"  >
                <span>{{ row.fqylxr }}--{{ row.fqylxrdh }}</span>
            </template>
            <template v-slot:fcyjssj_fcykssj="{row}">
                <span>{{ row.fcykssj }}至{{ row.fcyjssj }}</span>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="editClick(row)">查看</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <increase ref="increaseRef" @successClick="successClick"/>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import increase from './increase.vue'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import blobType from '@/common/blobType'
import moment from 'moment'
import { exportXcjcArrange } from './service/index'
import {
    initZltxwjFlow,
    queryTreeList,
} from './service/index'
export default {
    components:{
        commpVxeTable,
        increase
    },
    props:{

    },
    data(){
        return{
            ftype:undefined,
            replaceFields: {
                children: 'children', //后端数组层级的名字
                key: 'key', //一般是id
                title: 'value',
                value: 'value' //onSelect(selectedKeys)的selectedKeys的参数值，便于获取然后返回给后端
            },
            treeTypeList:[],
            expandedKeys: '',
            formItem:[
                {
                    label: '科室',
                    model: 'fywflcode',
                    type:'Select',
                    options:[{
                        label:'药品注册审评科',
                        value:'001001',
                    },{
                        label:'药品生产查验科',
                        value:'001002',
                    },{
                        label:'药品流通查验科',
                        value:'001003',
                    },{
                        label:'医疗器械审评查验科',
                        value:'002',
                    },{
                        label:'食品化妆品审评查验科',
                        value:'003',
                    }]

                },{
                    label: '审评类型',
                    model: 'fjclx',
                },{
                    label: '企业名称',
                    model: 'fqymc',
                },{
                    label: '审评时间',
                    model: 'fcyjssj',
                    slotName:'fcyjssj_name'
                },{
                    label: '审评员',
                    model: 'jcry',
                }

            ],//
            columnsVxe:[
            { 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '科室', //列头显示文字
                field: 'ks',
                // slots: {
                //     default: 'fwjmc_name',
                // },
                // width:200
            },{
                title: '审评类型',
                field: 'fjclx',
            },{
                title: '企业名称',
                field: 'fqymc',
            },{
                title: '地址',
                field: 'fqyzszcdz',
            },{
                title: '企业联系人及电话',
                field: 'fqylxrdh',
                slots: {
                    default: 'fqylxr_fqylxrdh',
                },
            },{
                title: '审评范围',
                field: 'fcyjcfw',
            },{
                title: '审评时间',
                field: 'fcykssj',
                slots: {
                    default: 'fcyjssj_fcykssj',
                },
            },{
                title: '审评员',
                field: 'jcry',
            },{
                title: '备注',
                field: 'bz',
            }
            ,{
                title: '操作',
                field: 'id',
                slots: {
                // 使用插槽模板渲染
                default: 'operation_btn',
                },
                width:90
                // visible:!this.parameter.isReadOnly
            }
        ],
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'id',
                paramet:{}
            },
            selectIdArr:[],
            DownloadTemplateLoading:false,
            leadingOutLoading:false,
            searchFrom:{},
            inspectionTime:[],
        }
    },
    watch:{

    },
    mounted(){
        queryTreeList().then(res => {
            if (res.code == 200){
                this.treeTypeList = res.result;
            }
        })
    },
    methods:{
        successClick(){
            this.$refs.acceptanceRegistrationRef.searchEvent()
        },
        treeChange(val){
            //console.log(val)
        },
        searchEvent(searchFrom){//搜索
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                fcykssj:this.inspectionTime[0]?moment(this.inspectionTime[0]).format('YYYY-MM-DD')+' 00:00:00':'',
                fcyjssj:this.inspectionTime[1]?moment(this.inspectionTime[1]).format('YYYY-MM-DD')+' 00:00:00':'',
            }
            this.searchFrom = {...searchFrom,...this.dataTableConfig.paramet}
            //console.log(this.dataTableConfig.paramet)
        },
        resetEvent(){//重置
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                fcykssj:'',
                fcyjssj:'',
            }
            this.inspectionTime = []
            this.searchFrom = {}
        },
        checkboxChange(row){
            this.selectIdArr = []
            row.forEach(item => {
                this.selectIdArr.push(item.id)
            });
        },
        exportClick(){//导出
            var that = this
            this.leadingOutLoading = true
            var fileName = '审评查验中心各科室技术审评安排汇总情况表-' + moment().format('YYYY年MM月DD日')
            
            exportXcjcArrange(this.searchFrom).then((data) => {
                this.leadingOutLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })

        },
        editClick(val){
            this.$refs.increaseRef.getData(val)
            this.$refs.increaseRef.visibleShow = true
        },
    }
}
</script>
<style lang="less">
.quality-system-fwjmc{
    display: flex;
    align-items: center;
    .fxdzt-name{
        display: inline-block;
        margin-left: 3px;
        color: #fff;
        padding: 0 3px;
        font-size: 12px;
        border-radius: 2px;
    }
    .orange-v{
        background: orange;
    }
    .yellow-v{
        background: yellow;
    }
    .red-v{
        background: red;
    }
}
</style>